<!doctype html>
<html>
<head>
<include file="Include:meta" />
<title>设置-目的地运营集团数据管理平台</title>
<include file="Include:style" />
<style type="text/css">
.operation-item{cursor:pointer;display:inline-block;}
.operation-btn{display:none;}
.operation-item:hover .operation-btn{display:inline;}
.second-list{width:310px;float:left;}
.toggle-item{ line-height: 30px; padding: 10px 70px; }
.toggle-item a{ width: 33.333%; display: inline-block; }
.form-item .name_btn{ color: #000; }
</style>
</head>
<body>
<include file="Include:header" />
<include file="Include:left" />
<div id="main">
	<div class="crumbs">
		<div class="crumbs-text">项目人员管理 > 项目职务</div>
	</div>
	<div id="content">
		<div class="table-scrollx">
			<table class="table table-bordered table-hover">
				<tr class="table-header fixed-table-header">
					<td width="220" style="font-size: 14px;">
						一级分类
					</td>
					<td style="font-size: 14px;">
						二级分类<a href="javascript:;" class="ml5 second-add"><i class="glyphicon glyphicon-plus"></i></a>
					</td>
				</tr>
				<if condition="$result eq NULL">
					<tr><td colspan="2" class="form-item text-center">暂无相关数据</td></tr>
				</if>
				<volist name="result" id="do">
					<tr> 
						<td>
							<span class="operation-item">{$do['first_name']}<span class="operation-btn">
							<span class="edit-item hide">
								<input type="text" class="form-control edit-input w100" val="{$do['first_name']}" />
								<input type="button" class="btn edit-confirm" mid="{$do['id']}" labels="1" value="确认" />
								<input type="button" class="btn btn-default edit-cancel" value="取消" />
							</span>
						</td>
						<td>
                            <foreach name="do['second']" item="uo">
                                <div class="second-list">
									<span class="operation-item">{$uo['second_name']}<span class="operation-btn">
										<a href="javascript:;" class="ml5 edit-btn" data-toggle="tooltip" data-placement="right" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>
										<if condition="($uo['is_delete'] neq 1)">
                                            <a href="javascript:;" class="ml5 delete-btn" data-toggle="tooltip" data-placement="right" title="删除" mid="{$uo['id']}" bool="1" labels="2"><i class="glyphicon glyphicon-trash"></i></a>
                                        </if>
										<if condition="$do['sum'] neq 1">
                                            <a href="javascript:;" class="ml5 sort-btn" data-toggle="tooltip" data-placement="right" title="排序" fid="{$do['id']}" labels="2"><i class="glyphicon glyphicon-resize-vertical"></i></a>
                                        </if>
										</span></span>
									<span class="edit-item hide">
										<input type="text" class="form-control edit-input w200" val="{$uo['second_name']}" />
										<input type="button" class="btn edit-confirm" mid="{$uo['id']}" labels="2" value="确认" />
										<input type="button" class="btn btn-default edit-cancel" value="取消" />
									</span>
                                </div>
                            </foreach>
						</td>
					</tr> 
				</volist>
			</table>
		</div>
	</div>
</div>
<include file="Public:footer"/>
<!--删除弹框-->
<div class="modal fade" id="modal-delete" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>确认提示框</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">您确定要删除吗？</div>
			<div class="modal-footer">
				<button type="button" class="btn delete-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--有数据删除弹框-->
<div class="modal fade" id="modal-delete2" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>确认提示框</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">
				您确定要删除吗？<br />
				删除后将该分类移至<span class="ml5"><select name="types{$k}[val][]" class="form-control select-sd" autocomplete="off"></select></span>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn delete-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--添加弹框-->
<div class="modal fade" id="modal-add" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4>添加分类</h4>
				<i class="fa fa-times" aria-hidden="true" data-dismiss="modal"></i>
			</div>
			<div class="modal-body">
				<table class="table table-bordered">
					<tr class="table-header">
						<td width="60%">一级分类</td>
						<td>二级分类</td>
					</tr>
					<tr>
						<td class="first-td"></td>
						<td class="second-td"></td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn add-confirm">确认</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!--排序弹框-->
<div class="sort-box hide">
	<div class="title">分类排序</div>
	<div class="sort-main">
		<ul></ul>
	</div>
	<div class="btn-item">
		<a href="javascript:;" class="btn sort-confirm">确认</a>
		<a href="javascript:;" class="btn btn-default sort-cancel">取消</a>
	</div>
</div>
<include file="Include:javascript" />
<script type="text/javascript" src="__PUBLIC__/js/ddsort.js"></script>
<script type="text/javascript">
    $(function(){
        $('.choice').click(function(){
            var second = $(this).attr('second-id'),
                    first = $(this).attr('first-id');
            $("[name='second_id']").val(second);
            $("[name='first_id']").val(first);
        })
        //全选
        $('body').on('click','.user-all',function(){
            $(this).addClass('user-active');
            $(this).html("取消全选");
            $('.modal-body').find('.user-checkbox').prop("checked",true);
        })
        $('body').on('click','.user-active',function(){
            $(this).removeClass('user-active');
            $(this).html("全选");
            $('.modal-body').find('.user-checkbox').removeAttr("checked");
        })
        //分类
        $(".filter-orders").find("a").click(function(){
            var ids = "";
            $(this).parents("ul").find("li").removeAttr("class");
            $(this).parent("li").attr("class","current");
            $(".filter-orders").find("li").each(function(){
                if($(this).attr("class") == "current"){
                    ids += $(this).find("a").attr("ids")+",";
                }
            });
            ids = ids.replace(/\,$/g,"");
            var cid = $('.filter-first .current a').attr("cid");
            classif = "{$classif}";
            type = "{$type}";
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_data",
                data:{"ids":ids,"center_id":cid,"classif":classif,"type":type},
                success:function(data){
                    if(data){
                        var html="<tr class='table-header'><td colspan='4'>名称</td></tr>";

                        html+= "<tr>";
                        for(var i=0;i<data.length;i++){
                            html+= "<td>";
                            html+= "<input class='user-checkbox' type='checkbox' name='main_id[]' value="+data[i].id+" />"+data[i].name+"";
                            html+= "</td>";
                            if((i+1)%3==0){
                                html+= "</tr>";
                            }
                        }
                        html+= "</tr>";
                        $('#detailModal').find('table').html(html);
                    }else{
                        $('#detailModal').find('table').html("<tr class='table-header'><td colspan='4'>名称</td></tr><tr><td class='Text_c' colspan='4'>暂无相关内容</td></tr>");
                    }
                }
            });
        });
        $('.user-checkbox').click(function(){
            $('.modal-footer').find('.error-item').hide();
        })
        //反选提交
        $("#detailModal .user-affirm").click(function(){
            var tag = true;
            if($('.user-checkbox:checked').length==0){
                tag = false;
                $('.modal-footer').find('.error-item').show();
            }
            if(tag){
                $.ajax({
                    type:"POST",
                    async:false,
                    dataType:"json",
                    data:$("[name='detailModal']").serialize()+"&action=data",
                    url:"__APP__/Index/label_administration_operation",
                    success:function(data){
                        if(data.status==0){

                        }else{
                            success_pop(data.status,data.msg);
                        }
                    }
                });
            }
        })
        $("#folderModal .form-item input").focus(function(){
            $(this).next('.error-item').hide();
        })

        //编辑
        $(".edit-btn").on("click",function(){
            var operation_item = $(this).parents(".operation-item"),
                    edit_item = operation_item.next(".edit-item"),
                    edit_input = edit_item.find(".edit-input"),
                    visible = $("table").find(".edit-item:visible");
            visible.find(".edit-cancel").trigger("click");
            operation_item.hide();
            edit_item.show();
            edit_input.val(edit_input.attr("val"));
        });
        //编辑取消
        $(".edit-cancel").on("click",function(){
            var edit_item = $(this).parent(".edit-item").show(),
                    operation_item = edit_item.prev(".operation-item"),
                    edit_input = edit_item.find(".edit-input");
            operation_item.show();
            edit_item.hide();
            edit_input.removeClass("red");
        });
        //编辑确认
        $(".edit-confirm").on("click",function(){
            var edit_item = $(this).parent(".edit-item"),
                    edit_input = edit_item.find(".edit-input"),
                    val = edit_input.val(),
                    mid = $(this).attr("mid"),
                    labels = $(this).attr("labels");
            if(!edit_input.hasClass("red")){
                if(val==""){
                    edit_input.val("必填项").addClass("red");
                }else if(/\s/.test(val)){
                    edit_input.val("不能含有空格").addClass("red");
                }else{
                    var classif = "{$classif}",
                            fcenter_id = "{$fcenter_id}";
                    $.ajax({
                        type:"POST",
                        async:false,
                        dataType:"json",
                        url:"__APP__/Index/label_administration_operation",
                        data:{"name":val,"id":mid,"labels":labels,"action":"edit","classif":classif,"fcenter_id":fcenter_id},
                        success:function(data){
                            success_pop(data['status'],data['msg']);
                        }
                    });
                }
            }
        });
        //删除
        $(".delete-btn").on("click",function(){
            var mid = $(this).attr("mid"),
                    bool = $(this).attr("bool"),
                    labels = $(this).attr("labels");
            if(bool){
                $("#modal-delete").modal("toggle").find(".delete-confirm").attr({"mid":mid,"labels":labels,"bool":bool});
            }else{
                var modal = $("#modal-delete2");
                $.ajax({
                    type:"POST",
                    async:false,
                    dataType:"json",
                    url:"__APP__/Index/label_administration_status",
                    data:{"id":mid,"labels":3},
                    success:function(data){
                        var option = "";
                        for(var i=0;i<data.length;i++){
                            option+="<option value="+data[i].id;
                            if(data[i].second_name=="其它"){
                                option+=" selected ";
                            }
                            option+=">"+data[i].second_name+"</option>";
                        }
                        modal.find("select.select-sd").html(option);
                    }
                });
                modal.find(".delete-confirm").attr({"mid":mid,"labels":labels});
                modal.modal("toggle");
            }
        });
        //删除确认
        $("#modal-delete").find(".delete-confirm").on("click",function(){
            var mid = $(this).attr("mid"),
                    bool = $(this).attr("bool"),
                    labels = $(this).attr("labels"),
                    classif = "{$classif}",
                    fcenter_id = "{$fcenter_id}";
            $("#modal-delete").hide();
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_operation",
                data:{"id":mid,"labels":labels,"action":"delete","bool":bool,"classif":classif,"fcenter_id":fcenter_id},
                success:function(data){
                    success_pop(data['status'],data['msg']);
                }
            });
        });
        $("#modal-delete2").find(".delete-confirm").on("click",function(){
            var mid = $(this).attr("mid"),
                    labels = $(this).attr("labels"),
                    cid = $("#modal-delete2").find("select.select-sd").val(),
                    classif = "{$classif}",
                    fcenter_id = "{$fcenter_id}";
            $("#modal-delete2").hide();
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_operation",
                data:{"id":mid,"labels":labels,"cid":cid,"action":"delete","bool":"","classif":classif,"fcenter_id":fcenter_id},
                success:function(data){
                    success_pop(data['status'],data['msg']);
                }
            });
        });
        //一级分类添加
        $(document).on("click",".first-add",function(){
            var table = $("#modal-add").find(".modal-body table");
            table.find(".first-td").html("<input type='text' class='form-control first-input add-input w100' /><label class='radio-inline ml10'><input type='radio' value='1' name='property'>单选</label><label class='radio-inline'><input type='radio' value='2' name='property' checked>多选</label>");
            table.find(".second-td").html("<input type='text' class='form-control second-input add-input w100' />");
            $("#modal-add").modal("toggle").find(".add-confirm").attr("labels",1);
        });
        //二级分类添加
        $(document).on("click",".second-add",function(){
            var table = $("#modal-add").find(".modal-body table"),
                    classif = "{$classif}",
                    fcenter_id = "{$fcenter_id}";
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_status",
                data:{"labels":1,"classif":classif,"fcenter_id":fcenter_id},
                success:function(data){
                    var first_select = "<select class='form-control first-select add-select'>";
                    first_select += "<option value='1000' selected>请选择</option>"
                    for(var i=0;i<data.length;i++){
                        first_select += "<option value="+data[i].id+">"+data[i].name+"</option>";
                    }
                    first_select += "</select>";
                    table.find(".first-td").html(first_select).find("select").select2();

                }
            });
            table.find(".second-td").html("<input type='text' class='form-control second-input add-input w100' />");
            $("#modal-add").modal("toggle").find(".add-confirm").attr("labels",2);
        });
        //添加确认
        $("#modal-add").find(".add-confirm").on("click",function(){
            var table = $(this).parents("#modal-add").find("table"),
                    labels = $(this).attr("labels"),
                    tag = true;
            table.find("input.add-input").each(function(){
                var val = $(this).val();
                $(this).next(".red").remove();
                if(val==""){
                    tag = false;
                    $(this).after("<span class='red ml5'>必填项</span>");
                }else if(/\s/.test(val)){
                    tag = false;
                    $(this).after("<span class='red ml5'>不能含有空格</span>");
                }
            });
            table.find("select.add-select").each(function(){
                var val = $(this).val();
                if(val==1000){
                    tag = false;
                    $(this).nextAll(".red").remove();
                    $(this).next(".select2").after("<span class='red ml5'>必填项</span>");
                }
            });
            if(tag){
                var first = "",
                        second = "",
                        property = table.find("[name='property']:checked").val(),
                        classif = "{$classif}",
                        fcenter_id = "{$fcenter_id}";
                if(labels==1){
                    first = table.find(".first-input").val();
                    second = table.find(".second-input").val();
                }else if(labels==2){
                    first = table.find("select.first-select").val();
                    second = table.find(".second-input").val();
                }
                $("#modal-add").hide();
                $.ajax({
                    type:"POST",
                    async:false,
                    dataType:"json",
                    url:"__APP__/Index/label_administration_operation",
                    data:{"first":first,"property":property,"second":second,"labels":labels,"action":"add","classif":classif,"fcenter_id":fcenter_id},
                    success:function(data){
                        success_pop(data['status'],data['msg']);
                    }
                });
            }
        });
        //取消错误提示
        $(".edit-input").on("focus",function(){
            if($(this).hasClass("red")){
                $(this).val("").removeClass("red");
            }
        });
        $("#modal-add").on("focus",".add-input",function(){
            $(this).next(".red").remove();
        });
        $("#modal-add").on("change",".add-select",function(){
            $(this).nextAll(".red").remove();
        });
        //排序
        $(".sort-btn").click(function(){
            $("body").append("<div class='sort-mask'></div>");
            var box = $(".sort-box"),
                    ul = $(".sort-box").find(".sort-main ul"),
                    fid = $(this).attr("fid"),
                    sid = $(this).attr("sid"),
                    labels = $(this).attr("labels"),
                    classif = "{$classif}",
                    fcenter_id = "{$fcenter_id}";
            box.find(".sort-confirm").attr("labels",labels);
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_status",
                data:{"fid":fid,"sid":sid,"labels":labels,"classif":classif,"fcenter_id":fcenter_id},
                success:function(data){
                    var list = "";
                    for(var i=0;i<data.length;i++){
                        list += "<li mid="+data[i].id+">"+data[i].name+"</li>";
                    }
                    ul.html(list);
                }
            });
            box.show();
            sortResize();
        });
        //排序框宽度自适应
        $(window).resize(function(){
            if($(".sort-box").is(":visible")){
                sortResize();
            }
        });
        function sortResize(){
            var box = $(".sort-box"),
                    main = box.find(".sort-main"),
                    ul = main.find("ul");
            main.width("auto");
            ul.width("auto");
            var w = main.width();
            ul.width(w);
            if(ul.outerHeight() > main.outerHeight()){
                main.width(w+18);
                box.width(w+18);
                $("#main").css("padding-left",w+18);
            }else{
                box.width(w);
                $("#main").css("padding-left",w);
            }
        }
        //排序确认
        $(".sort-confirm").on("click",function(){
            var box = $(this).parents(".sort-box"),
                    labels = $(this).attr("labels"),
                    mid_array = [],
                    classif = "{$classif}";
            box.find(".sort-main li").each(function(i){
                mid_array[i] = $(this).attr("mid");
            });
            $.ajax({
                type:"POST",
                async:false,
                dataType:"json",
                url:"__APP__/Index/label_administration_operation",
                data:{"mid_array":mid_array,"labels":labels,"action":"sort","classif":classif},
                success:function(data){
                    success_pop(data['status'],data['msg']);
                }
            });
        });
        //排序取消
        $(".sort-cancel").on("click",function(){
            $(".sort-box").hide();
            $(".sort-mask").remove();
            $("#main").css("padding-left",100);
        });
        //调用排序插件
        $(".sort-box").find(".sort-main").DDSort({
            target:'li',
            floatStyle:{
                'border-bottom':'0',
                'background-color':'#f49900',
                'box-shadow':'0 0 3px #ddd',
                'list-style-type':'disc'
            },
            cloneStyle:{
                'background-color':'#ddd'
            }
        });
    });
</script>
</body>
</tr>